<template>
  <!-- 用户导入对话框 -->
  <el-dialog :title="title" :visible.sync="open" :loading="loading" width="400px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="批次" prop="pici">
        <el-date-picker
          v-model="form.pici"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="请选择批次">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="补贴类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.fund_type_nyncj"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="headers"
               :action="baseUrl + uploadUrl + '?updateSupport=' + updateSupport" :disabled="isUploading"
               :data="form"
               :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        <!--        <el-link type="info" style="font-size:14px;color: #1890ff;" @click="downloadTemplate()">下载模板</el-link>-->
      </div>
      <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {getToken} from "@/utils/auth";
    import {deleteAction, downloadFile, downloadTemplate, getAction} from "@/api/manage";

    export default {
        name: "UploadDialogForFarm",
        dicts: ['fund_type_nyncj'],
        components: {},
        data() {
            return {
                // 是否显示弹出层（用户导入）
                open: false,
                loading: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: {Authorization: "Bearer " + getToken()},
                //模板下载地址
                downloadTemplateUrl: '/export/downloadTemplate',
                // 上传的地址
                baseUrl: process.env.VUE_APP_BASE_API,
                uploadUrl: "",
                tmplName: "",
                fileName: "",
                form: {
                    "pici": "",
                    "type": ""
                },
                // 表单校验
                rules: {
                    pici: [
                        {required: true, message: "请选择批次", trigger: "blur"}
                    ],
                    type: [
                        {required: true, message: "请选择补贴类型", trigger: "blur"}
                    ]
                },
            };
        },
        created() {

        },
        methods: {
            show() {
                this.open = true;
            },

            /**
             * 下载模板通用方法
             * @param tmplName
             * @param fileName
             */
            downloadTemplate() {
                let that = this;
                let params = {};
                params.tmplName = that.tmplName;
                params.fileName = that.fileName;
                downloadFile(that.downloadTemplateUrl, params);
            },

            /** 导入按钮操作 */
            handleImport() {
                this.title = "用户导入";
                this.open = true;
            },

            // 文件上传中处理
            handleFileUploadProgress(event, file, fileList) {
                this.isUploading = true;
                this.loading = true;
            },
            // 文件上传成功处理
            handleFileSuccess(response, file, fileList) {
                if (response.code == 200) {
                    //成功
                    this.open = false;
                    this.$refs.upload.clearFiles();
                }
                this.loading = false;
                this.isUploading = false;
                this.$emit('handleFileSuccess', response);
            },
            // 提交上传文件
            submitFileForm() {
                let that = this;
                that.$refs["form"].validate(valid => {
                    if (valid) {
                        that.$refs.upload.submit();
                    } else {
                        that.confirming = false;
                    }
                });
            },


        }
    }
</script>

<style scoped>

</style>
